<template>
  <view class="details_wrap">
    <!-- 控制箭头显示 -->
    <u-empty
      text="暂无内容"
      mode="list"
      v-if="currentItem.children.length === 0"
    ></u-empty>
    <u-collapse
      :arrow="currentItem.children[0].children.length === 0 ? false : true"
    >
      <u-collapse-item
        :title="detailCon.name"
        v-for="detailCon in currentItem.children"
        :key="detailCon.catId"
        :disabled="detailCon.children.length === 0 ? true : false"
      >
        <scroll-view
          style="padding: 0 30rpx; overflow: auto; height: 460rpx"
          scroll-y="true"
        >
          <u-collapse v-if="detailCon.children.length">
            <u-collapse-item
              :title="detail.name"
              v-for="detail in detailCon.children"
              :key="detail.catId"
              @change="getArticleData(detail.catId)"
            >
              <scroll-view scroll-y="true" class="article_content">
                <view
                  v-for="(item, index) in articleData"
                  :key="index"
                  class="article_content_item"
                  @click="
                    articleData[index]['noClick']
                      ? ''
                      : goArticlePage(detail.catId, index)
                  "
                  ><u-icon name="more-circle"></u-icon
                  >{{ item.articleTitle }}&nbsp;</view
                >
              </scroll-view>
            </u-collapse-item>
          </u-collapse>
        </scroll-view>
      </u-collapse-item>
    </u-collapse>
  </view>
</template>

<script>
export default {
  data() {
    return {
      articleData: [1],
    }
  },
  methods: {
    goArticlePage(catId, index) {
      uni.navigateTo({
        url: `/pages/article/index?catId=${catId}&id=${index}`,
      })
    },
    async getArticleData(catId, index) {
      console.log('当前id', catId)
      //????????????????????????????????????
      let result
      try {
        result = await this.request({
          url: `/exercise/artcle/getArtcleList?catId=${catId}`,
        })
      } catch (error) {
        console.log(error.message);
      }
      if (result.data.length === 0) {
        this.articleData = [{ articleTitle: '数据暂无内容', noClick: true }]
      } else {
        this.articleData = result.data
      }
    },
  },
  props: {
    currentItem: Object,
  },
}
</script>

<style lang="scss">
.details_wrap {
  padding: 0 20rpx;
  .article_content {
    height: 250rpx;
    padding: 0 20rpx;
    .article_content_item {
      color: #666;
      letter-spacing: 4rpx;
      padding: 20rpx 0rpx;
    }
  }
}
</style>